<template>
  <div class="peer-wrap">
	  <div class="peer-wrap-good">
		  <div class="peer-wrap-good-item" v-for="item in peerInfo" :key="item.itme_id">
			  <div class="peer-wrap-good-item-img">
				  <img :src="item.img_src" alt="">
			  </div>
			  <div class="peer-wrap-good-item-cont">
				  <div class="text">
					  <span>{{jsapiTitle}}</span>
					  <span>，快找小伙伴帮你付款吧</span>
				  </div>
				  <div class="itembtn" @click="navToDetail(item.itme_id)">
					  <div class="btn red-gra-btn">查看商品</div>
				  </div>
			  </div>
		  </div>
		  <div class="peer-wrap-good-item-money">
			  <p class="line-img"><img src="https://img.wifenxiao.com/h5-wfx/images/order/peer_money.png" alt=""></p>
			  <p>代付金额</p>
			  <p class="peer-price"><span>&yen;</span><span>{{peerInfo.length ? peerInfo[0].payment:0}}</span></p>
			  <p>等待付款</p>
		  </div>
	  </div>
	  <div class="peer-wrap-tab">
		  <ul>
			  <li :class="peerType == 1?'active':''" @click="clickPeerStyle(1)">
				  <p>单人代付</p>
			  </li>
			  <li :class="peerType == 2?'active':''" @click="clickPeerStyle(2)">
				  <p>多人代付</p>
			  </li>
		  </ul>
	  </div>
	  <div class="peer-wrap-text">
		<textarea v-model="peerMessage" placeholder="说点什么吧..."></textarea>
	  </div>
	  <div class="peer-wrap-btn">
		  <!-- TODO 小程序分享处理 -->
		  <wx-button class="btn red-gra-btn" open-type="share">下一步</wx-button>
		  <div class="btn red-border-btn" @click="seeOrderDetail">查看订单详情</div>
	  </div>

	  <van-overlay :show="sharePopShow" :z-index="99">
		<div class="wrapper" @click="sharePopShow = false">
			<img src="https://img.wifenxiao.com/h5-wfx/images/item/bargain/bargin_share.png" alt="">
		</div>
		</van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { Overlay } from 'vant'
Vue.use(Overlay)
// import { mapGetters } from 'vuex'
import { getPeerPayOrder } from '@/api/order/peerPay.js'
import { mpShare} from '@/utils/utils'
import small from '@/smallapp/small'

export default Vue.extend({
  data() {
    return {
      peerType: 1,
      peerMessage: '',
      orderId: 0,
      sharePopShow: false,
      peerInfo: [],
	  jsapiTitle: '',
	  shareInfo: {},
	  sharePeerInfo: {}
    }
  },
  // computed: {
  //   ...mapGetters(['wxConfig'])
  // },
  // watch: {
  //   wxConfig(val) {
  //     // console.log(val, 'wxconfig有变化')
  //   }
  // },
  created() {
    const sendData = {}
    this.orderId = this.$route.query.order_id
    sendData.order_id = this.orderId
    this.getPeerPayOrderFun(sendData)
  },
  mounted() {
      window.addEventListener('wxload', query => {
          // console.log(query, '分享参数')
          small.HandleShareParams()
      })
  },
  methods: {
    /**
	 * 切换代付方式
	 */
    clickPeerStyle(type) {
      this.peerType = type
    },

    /**
	 * 下一步
	 */
    nextStepBtn() {
      const sendData = {}
      sendData.order_id = this.orderId
      sendData.method_type = 'add'
      sendData.type = 1
      sendData.peer_type = this.peerType
      sendData.peer_message = this.peerMessage
      getPeerPayOrder(sendData).then(res => {
        if (res.status === 1) {
          this.sharePopShow = true
        } else {
          this.$Error(res.msg)
        }
      })
    },

    navToDetail(id) {
      this.$JumpName(this, 'item-detail', { detailId: id })
    },

    /**
	 * 查看订单详情
	 */
    seeOrderDetail() {
      this.$JumpName(this, 'peer-pay-detail', { id: this.orderId })
    },

    /**
	 * 分享成功之后
	 */
    shareSuccess() {
      this.$JumpName(this, 'peer-pay-detail', { id: this.orderId })
    },

    /**
	 * 获取代付详情
	 */
    getPeerPayOrderFun(sendData) {
      getPeerPayOrder(sendData).then(res => {
        if (res.status === 1) {
		  this.peerInfo = res.data.info
		  this.shareInfo = res.data
          this.jsapiTitle = res.data.jsapi_title
			  this.sharePeerInfo = {
				title: res.data.jsapi_title,
				imgUrl: res.data.jsapi_img,
				shareParam: res.data.jsapi_url.split('?')[1]
			  }
			  mpShare (true, false, '/goodsOrder/pages/peerPayDetail/index', this.sharePeerInfo,'/peer-pay-detail')

        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables.scss';
@import 'src/styles/mixin';
	.peer-wrap {
		width: 100%;
		padding: 20px 25px;
		box-sizing: border-box;
		&-good {
			background-color: #fff;
			border-radius: 20px;
			margin-bottom: 20px;
			padding-bottom: 25px;
			&-item {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: space-between;
				width: 100%;
				padding: 25px;
				box-sizing: border-box;
				&-img {
					width: 186px;
					height: 186px;
					border-radius: 10px;
					overflow: hidden;
					img {
						width: 100%;
						height: 100%;
					}
				}
				&-cont {
					width: 69%;
					margin-left: 15px;
					position: relative;
					.text {
						font-weight: bold;
						@include lineClamp(24px, 1.4, 3);
					}
					.itembtn {
						position: absolute;
						bottom: 5px;
						right: 0px;

						.btn {
							color: #fff;
							line-height: 24px;
							font-size: 22px;
							font-weight: 500;
							padding: 15px 26px;
							border-radius: 26px;
						}
					}
				}
				&-money {
					width: 100%;
					p.line-img {
						width: 100%;
						height: 50px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.peer-price {
						padding: 28px 0;
						span {
							font-weight: bold;
							&:first-child {
								font-size: 32px;
								margin-right: 12px;
							}
							&:last-child {
								font-size: 60px;
							}
						}
					}
					p {
						width: 100%;
						text-align: center;
						&:nth-child(2) {
							color: #666;
							font-size: 24px;
							line-height: 40px;
							font-weight: 500;
						}
						&:nth-child(4) {
							color: #F21228;
							font-size: 24px;
							line-height: 40px;
							font-weight: 500;
						}
					}
				}
			}
		}
		&-tab {
			background-color: #fff;
			border-radius: 20px;
			margin-bottom: 20px;
			ul {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: space-between;
				height: 92px;
				line-height: 92px;
				li {
					width: 50%;
					text-align: center;
					font-size: 26px;
					position: relative;
					&.active {
						font-weight: bold;
						color: #F21228;
						&::after {
							position: absolute;
							width: 86px;
							height: 5px;
							content: "";
							background: url("https://img.wifenxiao.com/h5-wfx/images/user/recharge/title_bg.png")
								center/cover no-repeat;
							left: 50%;
							transform: translateX(-50%);
							bottom: 14px;
						}
					}
				}
			}
		}
		&-text {
			background-color: #fff;
			border-radius: 20px;
			margin-bottom: 20px;
			overflow: hidden;
			width: 100%;
			textarea {
				width: 100%;
				height: 328px;
				border-radius: 3px;
				padding: 25px;
				resize: none;
			}
		}
		&-btn {
			.btn{
				font-size: 28px;
				color: #fff;
				line-height: 88px;
                text-align: center;
				margin-bottom: 20px;
				border: 1px solid transparent;
                border-radius: 60px;
				&:last-child {
					color:#F21228;
					margin-bottom: 0;
					border-color: #F21228;
				}
			}
		}
		.wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			img {
			width: 100%;
			height: 100%;
			}
		}
	}
</style>